<template >
      <div class="detailContent">
        <p class="title">{{articleDetail.title}}</p>
        <div class="perDetail">
          <div class="avatar">
            <img :src="articleDetail.authorImage" alt="" @click="toUserInfo(articleDetail.userId)">
          </div>
          <p>
            <span class="author" @click="toUserInfo(articleDetail.userId)">{{articleDetail.author}}</span>
            <span class="date" v-show="showFlag">{{articleDetail.data|convertDate}}</span>
          </p>
        </div>
        <div class="picwraper">
          <swiper :options="swiperOption"  ref="mySwiper" >  
              <swiper-slide v-for="item in imgUrls" :key="item" > 
                  <img :src="item">
              </swiper-slide>
              <div class="swiper-pagination" slot="pagination"></div>  
          </swiper> 
        </div> 
        <p class="text">{{articleDetail.text}}</p>
      </div>
</template>

<script>
// import {formatDate} from '@/common/js/date.js'

export default {
  data() {
    return {
      articleDetail: {},
      showFlag: false,
      swiperOption: {
        autoplay: 3500,
        pagination: ".swiper-pagination",
        paginationClickable: true,
        loop: true
      },
      imgUrls: []
    };
  },
  // filters:{
  //       formatDate(time){
  //         return formatDate(time);
  //       }
  //   },
  mounted() {
    this.getArticleDetails();
  },
  methods: {
    getArticleDetails() {
      this.$axios
        .post(process.env.mock + "/articleDetail ")
        .then(res => {
          this.articleDetail = res.data.articleDeatil;
          this.showFlag = true;
          this.imgUrls = this.articleDetail.imgages;
        })
        .catch(error => {
          console.log(error);
        });
    },
    toUserInfo(val) {
      this.$router.push({
        name: "authorDetail",
        query: { id: val }
      });
    }
  }
};
</script>

<style lang="less">
  .detailContent {
    width: 100%;
    height: 100%;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    .title {
      font-size: 0.4rem;
      color: #232323;
      font-weight: bold;
      line-height: 0.4rem;
      text-align: center;
      margin-bottom: 0.4rem;
    }
    .perDetail {
      height: 2rem;
      margin-bottom: 0.3rem;
      .avatar {
        float: left;
        width: 2rem;
        height: 2rem;
        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }
      p {
        float: right;
        height: 2rem;
        width: 4.8rem;
        position: relative;
        .author {
          color: #ccc;
          font-size: 0.4rem;
          position: absolute;
          left: 0.2rem;
          bottom: 0.3rem;
        }
        .date {
          color: #ccc;
          font-size: 0.3rem;
          position: absolute;
          right: 0.4rem;
          bottom: 0.3rem;
        }
      }
    }

    .picwraper {
      .swiper-container {
        position: relative;
        width: 100%;
        .swiper-wrapper {
          .swiper-slide {
            img {
              width: 100%;
            }
          }
        }
        .swiper-pagination {
          .swiper-pagination-bullet {
            display: inline-block;
            border-radius: 100%;
            background: #000;
            opacity: 0.3;
          }
          .swiper-pagination-bullet-active {
            display: inline-block;
            border-radius: 100%;
            background-color: #fff;
          }
        }
      }
    }
    .text {
      font-size: 0.3rem;
      color: #232323;
      font-weight: bold;
      height: 0.6rem;
      line-height: 0.6rem;
      text-indent: 0.6rem;
    }
  }
</style>
